<template>
  <svg
    :class="svgClass"
    aria-hidden="true"
    v-on="$attrs"
    :style="{ color: props.color }"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>
<script lang="ts">
export default {
  name: "SvgIcon",
};
</script>

<script setup lang="ts">
/**
 * 名称：SvgIcon
 * @param name String required
 * @param color String
 * 使用方式：
 * 在 template 中使用 <svg-icon name="bug"/>
 */
import { computed } from "vue";

interface PropsType {
  name: {
    type: string;
    default: "home";
    required: false;
  };
  color: {
    type: string;
    default: "";
    required: false;
  };
  className: {
    type: String;
    default: "";
    required: false;
  };
}

/* data */
const props = defineProps<PropsType>(); // 获取props defineProps<{ msg: string }>()
const iconName = computed((): string => `#icon-${props.name}`);
const svgClass = computed((): string => {
  if (props.className) {
    return `svg-icon icon-${props.name}`;
  } else {
    return "svg-icon";
  }
});
</script>
  
  <style scoped>
.svg-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>